import React, {Component} from 'react';
import {Input, Form, Radio, Button, Row, Col, Spin, Upload, Icon, message} from "antd";
import {getToken} from "../../util/StorageUtil";
import ajax from '../../util/AjaxUtil';
import qs from 'qs';
import Global from "../../util/global";

class EditUserInfo extends Component {

    constructor(props) {
        super(props);

        this.state = {
            isLoading: false,
            isUpload: false,
            headImage: this.props.location.query.userInfo.headSculpture ? this.props.location.query.userInfo.headSculpture : null
        };
    }

    render() {
        const {getFieldDecorator} = this.props.form;

        const uploadButton = (
            <div>
                <Icon type={this.state.isUpload ? 'loading' : 'plus'}/>
                <div className="ant-upload-text">点击修改头像</div>
            </div>
        );

        return (
            <Spin spinning={this.state.isLoading}>
                <Form>
                    <Form.Item label={"真实姓名"} labelCol={{span: 5, offset: 2}} wrapperCol={{span: 15}}>
                        {getFieldDecorator("realName", {
                            rules: [{max: 10, min: 1, required: false}],
                            initialValue: this.props.location.query.userInfo ? this.props.location.query.userInfo.realName : null
                        })(
                            <Input size={'small'}/>
                        )}
                    </Form.Item>
                    <Form.Item label={"性别"} labelCol={{span: 5, offset: 2}} wrapperCol={{span: 15}}>
                        {getFieldDecorator("sex", {
                            initialValue: this.props.location.query.userInfo ? this.props.location.query.userInfo.sex : 1
                        })(
                            <Radio.Group>
                                <Radio value={1}>男</Radio>
                                <Radio value={0}>女</Radio>
                            </Radio.Group>
                        )}
                    </Form.Item>
                    <Form.Item label={"手机号"} labelCol={{span: 5, offset: 2}} wrapperCol={{span: 15}}>
                        {getFieldDecorator("phone", {
                            rules: [{required: false, pattern: /^1(3|4|5|7|8)\d{9}$/, message: '手机号不合法'}],
                            initialValue: this.props.location.query.userInfo ? this.props.location.query.userInfo.phone : null
                        })(
                            <Input size={'small'}/>
                        )}
                    </Form.Item>
                    <Form.Item label={"邮箱"} labelCol={{span: 5, offset: 2}} wrapperCol={{span: 15}}>
                        {getFieldDecorator("email", {
                            rules: [{required: false, type: 'email'}],
                            initialValue: this.props.location.query.userInfo ? this.props.location.query.userInfo.email : null
                        })(
                            <Input size={'small'}/>
                        )}
                    </Form.Item>
                    <Form.Item label={"个人简介"} labelCol={{span: 5, offset: 2}} wrapperCol={{span: 15}}>
                        {getFieldDecorator("about", {
                            initialValue: this.props.location.query.userInfo ? this.props.location.query.userInfo.about : null
                        })(
                            <Input.TextArea size={'small'}/>
                        )}
                    </Form.Item>
                    <Form.Item label={"头像"} labelCol={{span: 5, offset: 2}} wrapperCol={{span: 15}}>
                        <Upload
                            name={"headImage"}
                            listType="picture-card"
                            showUploadList={false}
                            action="/userCenter/user/uploadHeadImage"
                            accept={"image/*"}
                            onChange={this.handleChange.bind(this)}
                            headers={{
                                'Authorization': getToken()
                            }}
                            data={{userId: this.props.location.query.userInfo.id}}
                        >
                            {this.state.headImage != null ?
                                <img style={{width: 100, height: 100}} alt={"头像"}
                                     src={'/userCenter/public/getHeadImage?path=' + this.state.headImage}/> : uploadButton}
                        </Upload>
                    </Form.Item>
                    <Row>
                        <Col span={6} offset={2} style={{textAlign: 'right'}}>
                            <Button type="primary" onClick={this.updateUserInfo.bind(this)}>修改</Button>
                        </Col>
                    </Row>
                </Form>
            </Spin>
        );
    }

    handleChange = (info) => {
        if (info.file.status === 'uploading') {
            this.setState({isUpload: true});
            return;
        }
        if (info.file.status === 'done' && info.file.response.result) {
            this.setState({
                headImage: info.file.response.message
            });
            Global.triggerMessage("update_head_image", info.file.response.message);
        }
    };

    updateUserInfo() {
        let data = this.props.form.getFieldsValue();
        data.id = this.props.location.query.userInfo.id;
        ajax.post("/userCenter/user/editInfo", qs.stringify(data))
            .then((resource) => {
                if (resource.data.result) {
                    message.success("修改成功");
                } else {
                    message.error("修改失败");
                }
            })
            .catch((error) => {
                message.error("修改失败");
            });
    }
}

export default Form.create()(EditUserInfo);